<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css">
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>
    
    <script src="js/format.js"></script>
    <script src="data.js"></script>
    
    <title>dzlua</title>

    <style type="text/css">
      .s-card {
        width: 12rem;
        height: 12rem;
        float: left;
        margin: 5px 5px 5px 5px;
      }
      .s-button {
        width: 100%;
      }
      .s-title {
        width: 100%;
        text-align: center;
      }
      .s-card-head {
        height: 5rem;
        position: relative;
      }
      .s-card-close {
        position: absolute;
        top: 0;
        left: 10.5rem;
      }
      .s-div-items {
        margin: 100px 20px 100px 100px;
      }
      
      body{background: url(img/topbgg.png);}
      .top{height: 120px;background:url(img/topbgg.png) repeat-x;position: fixed;top:0;width:100%;z-index: -1;left:0;}
      .top .container{height: 120px;width: 1200px;margin: 0 auto;background-position:center;}
      .top .container .logo img{vertical-align: middle;width: 3rem;}
      .top .container .logo span{vertical-align: middle;font-size: 20px;color: white;text-align: center;}
      .top .container .logo{float:left;font-size: 25px;vertical-align: middle;line-height: 70px;}
      .bottom{height: 60px;position: fixed;bottom:0;width:100%;z-index: 99;left:0;background: #1f2a36;_position:absolute;}
      .bottom .container{height: 60px;width: 1217px;margin: 0 auto;line-height: 60px;color: #676a6c;font-size: 12px;text-align: center;}
    </style>
  </head>
  <body>
    <div class="top">
      <div class="container">
        <div class="logo">
          <img src="https://gitee.com/uploads/42/692042_dzlua.png"><span> Dzlua实用小工具</span>
        </div>
      </div>
    </div>

    <div class="card-group s-div-items" id="div_items"></div>

    <div class="bottom">
      <div class="container">
          <a href="https://gitee.com/dzlua/" target="_blank">Copyright 2017-2020 Dzlua. Email: 505544956@qq.com</a>
        </div>
    </div>

    <!-- 模态框（Modal） -->
    <div class="modal fade" id="id-addUI">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
     
          <!-- 模态框头部 -->
          <div class="modal-header">
            <h4 class="modal-title">添加小工具</h4>
            <button type="button" class="close" data-dismiss="modal">&times;</button>
          </div>
     
          <!-- 模态框主体 -->
          <div class="modal-body">
            <form>
              <div class="form-group">
                <label for="usr">标题:</label>
                <input type="text" class="form-control" id="id-title">
              </div>
              <div class="form-group">
                <label for="pwd">链接地址:</label>
                <input type="url" class="form-control" id="id-href">
              </div>
              <div class="form-group">
                <label for="pwd">图片地址:</label>
                <input type="url" class="form-control" id="id-img">
              </div>
            </form>
          </div>
     
          <!-- 模态框底部 -->
          <div class="modal-footer">
            <button type="button" class="btn" onclick="onAddBtnClick(this);">添加</button>
            <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
          </div>
     
        </div>
      </div>
    </div>

    <script>
      function checkData(data) {
        if (!data) return false;
        if (!data.title) return false;
        if (!data.href) return false;
        if (!data.img) return false;
        if (data.title.length == 0) return false;
        if (data.href.length == 0) return false;
        if (data.img.length == 0) return false;
        return true;
      }

      function GetLocalDatas() {
        if (!window.localStorage) return [];
        let jsstr = window.localStorage.getItem('local_datas');
        let datas = JSON.parse(jsstr);
        if (!datas) return [];
        return datas;
      }
      function SetLocalDatas(data) {
        if (!window.localStorage) return false;
        if (!checkData(data)) return false;
        let datas = GetLocalDatas();
        datas.push(data);
        let jsstr = JSON.stringify(datas);
        window.localStorage.setItem('local_datas', jsstr);
        return true;
      }
      function RemoveLocalDatas(href) {
        if (!window.localStorage) return;
        if (!href || href.length == 0) return;
        let datas = GetLocalDatas();
        for (let i = 0; i < datas.length; ++i) {
          if (datas[i].href == href) {
            datas.splice(i, 1);
            break;
          }
        }
        let jsstr = JSON.stringify(datas);
        window.localStorage.setItem('local_datas', jsstr);
      }

      function onAddBtnClick(ele, idx) {
        if (SetLocalDatas({
          title: $('#id-title').val(),
          href: $('#id-href').val(),
          img: $('#id-img').val()
        })) { 
          $("#id-addUI").modal('hide');
          $('#id-title').val('');
          $('#id-href').val('');
          $('#id-img').val('');
          UpdateUI();
        }
      }

      function onRemoveBtnClick(ele, href) {
        RemoveLocalDatas(href);
        UpdateUI();
      }

      function getHtml(info, tp, idx) {
        if (tp == 0) {
          return ('<div class="card s-card">'
            +   '<div class="card-head s-card-head">'
            +     '<img class="card-img-top s-card-head" src="{0}" alt="Card image cap">'
            +   '</div>'
            +   '<div class="card-body">'
            +     '<h5 class="card-title s-title">{1}</h5>'
            +     '<a target="{2}" href="{3}" class="btn btn-primary s-button">查看</a>'
            +   '</div></div>').format(info.img, info.title, idx, info.href);
        } else if (tp == 1) {
          return ('<div class="card s-card">'
            +   '<div class="card-head s-card-head">'
            +     '<img class="card-img-top" src="{0}" alt="Card image cap">'
            +     '<button type="button" class="close s-card-close" onclick="onRemoveBtnClick(this, \'{3}\');">&times;</button>'
            +   '</div>'
            +   '<div class="card-body">'
            +     '<h5 class="card-title s-title">{1}</h5>'
            +     '<a target="{2}" href="{3}" class="btn btn-primary s-button">查看</a>'
            +   '</div></div>').format(info.img, info.title, idx, info.href);
        } else if (tp == 2) {
          return ('<div class="card s-card">'
            +   '<div class="card-head s-card-head">'
            +     '<img class="card-img-top s-card-head" src="{0}" alt="Card image cap">'
            +   '</div>'
            +   '<div class="card-body">'
            +     '<h5 class="card-title s-title">{1}</h5>'
            +     '<a target="{2}" data-toggle="modal" data-target="#id-addUI" class="btn btn-primary s-button">查看</a>'
            +   '</div></div>').format(info.img, info.title, idx);
        }
      }
      
      function addItem(ele,info, idx, tp = 0) {
        let child = document.createElement('div');
        child.innerHTML = getHtml(info, tp, idx);
        ele.appendChild(child);
      }

      function UpdateUI() {
        let ele = document.getElementById('div_items');
        ele.innerHTML = '';
        let idx = 0;
        datas.forEach(data => {
          addItem(ele, data, ++idx, 0)
        });

        GetLocalDatas().forEach(data => {
          addItem(ele, data, ++idx, 1)
        });

        if (window.localStorage) {
          addItem(ele, {
            img: '',
            title: '添加'
          }, ++idx, 2)
        }
      }

      (function(){
        UpdateUI();
      })();
    </script>
  </body>
</html>